<template>
  <el-scrollbar height="970px">
    <div class="out-box" style="width: 100%">
      <el-row class="row-box" >
        <el-col :span="3" v-for="(item,index) in 8">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-primary">
              <span class="sieve-item-content-success">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box" >
        <el-col :span="3" v-for="(item,index) in 8">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box" >
        <el-col :span="3" v-for="(item,index) in 8">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="7" v-for="(item,index) in 7">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-primary">
              <span class="sieve-item-content-success">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="7" v-for="(item,index) in 7">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="7" v-for="(item,index) in 7">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="4" v-for="(item,index) in 6">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="4" v-for="(item,index) in 6">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="4" v-for="(item,index) in 6">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="5" v-for="(item,index) in 5">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-primary">
              <span class="sieve-item-content-success">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="5" v-for="(item,index) in 5">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="5" v-for="(item,index) in 5">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="6" v-for="(item,index) in 4">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-primary">
              <span class="sieve-item-content-success">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="6" v-for="(item,index) in 4">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="6" v-for="(item,index) in 4">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="8" v-for="(item,index) in 3">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-primary">
              <span class="sieve-item-content-success">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="8" v-for="(item,index) in 3">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box">
        <el-col :span="8" v-for="(item,index) in 3">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-danger">
              <span class="sieve-item-content-danger">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-box" v-for="(item,index) in 17">
        <el-col :span="5" v-for="(item,index) in 5">
          <div class="sieve-item">
            <div class="sieve-item-content sieve-item-warning">
              <span class="sieve-item-content-warning">{{ 'ZN0000000000'+item }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.out-box{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.row-box {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;*/
  .el-col-7 {
    max-width: 14.285714285714%;
    flex: 0 0 14.285714285714%;
  }
  .el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
  }
  .sieve-item-primary {
    border: #00b8ff solid 1px;
  }
  .sieve-item-warning {
    //border: #E6A23C solid 1px;
    animation: glow 800ms ease-out infinite alternate;
  }
  .sieve-item-danger {
    //border: red solid 1px;
    animation: danger 800ms ease-out infinite alternate;
  }
  .sieve-item{
    margin: 8px;
    width: 100%;
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    .sieve-item-content{
      width: 200px;
      height: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;
      .sieve-item-content-label{
        width: 40%;
        color: #FFFFFF;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-info{
        width: 60%;
        color: #909399;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-primary{
        width: 60%;
        color: #409EFF;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-success{
        width: 100%;
        color: #95d475;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-danger{
        width: 100%;
        color: red;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-warning{
        width: 100%;
        color: #E6A23C;
        font-size: 18px;
        text-align: center;
      }
    }
  }
}
@keyframes glow {
  0% {
    border-color: rgb(239, 111, 64);
    box-shadow: 0 0 5px rgba(255, 30, 0, 0.2), inset 0 0 5px #FF9D291F, 0 1px 0 #C56E06B2;
  }
  100% {
    border-color: rgba(252, 144, 16, 0.89);
    box-shadow: 0 0 15px #C56E06B2, inset 0 0 10px #FF9D29D2, 0 1px 0 #F58403CD;
  }
}

@keyframes danger {
  0% {
    border-color: rgba(231, 132, 132, 0.99);
    box-shadow: 0 0 5px rgba(231, 132, 132, 0.99),inset 0 0 5px rgba(255, 41, 41, 0.12), 0 1px 0 rgba(245, 6, 6, 0.7);
  }
  100% {
    border-color: rgba(255, 0, 0, 1);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.99),inset 0 0 10px rgba(255, 41, 41, 0.82), 0 1px 0 rgba(245, 3, 3, 0.8);
  }
}
</style>